/**
 * Created by Jie on 2017/2/6.
 */
import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    TouchableHighlight,
    TouchableOpacity,
    ToastAndroid
} from 'react-native';
const styles = {
    toolbarlayout: {
        height: 49,
        backgroundColor: '#f67d29',
        flexDirection: 'row'
    },
    leftIconContainer: {
        position: 'absolute',
        backgroundColor: 'transparent',
        width: 49,
        height: 49,
        zIndex: 100
    },
    leftIcon: {
        flex: 1,
        resizeMode: 'center'
    },
    title: {
        flex: 1,
        textAlignVertical: 'center',
        textAlign: 'center',
        fontSize: 18,
        color: 'white'
    },
    rightIconContainer: {
        position: 'absolute',
        right: 0,
        backgroundColor: 'transparent',
        width: 49,
        height: 49,
        zIndex: 100
    },
    rightIcon: {
        flex: 1,
        resizeMode: 'center'
    }
};

export default class CustomToolbar extends Component {

    static defaultProps = {
        showLeftIcon: true,
        showRightIcon: false,
        leftIcon: require('../../img/icon_return.png'),
    };

    static propTypes = {
        showLeftIcon: React.PropTypes.bool,
        showRightIcon: React.PropTypes.bool,
        leftIcon: React.PropTypes.number,
        rightIcon: React.PropTypes.number,
        title: React.PropTypes.string
    };

    render() {
        return (
            <View style={styles.toolbarlayout}>
                {this._renderLeftImg()}
                <Text style={styles.title}>{this.props.title}</Text>
                {this._renderRightImg()}
            </View>
        );
    }

    _renderLeftImg() {
        if (this.props.showLeftIcon) {
            return (
                <TouchableHighlight style={styles.leftIconContainer}
                                    underlayColor='rgba(255, 255, 255, 0.2)'
                                    onPress={() => ToastAndroid.show('return', ToastAndroid.SHORT)}>
                    <Image style={styles.leftIcon} source={this.props.leftIcon}/>
                </TouchableHighlight>
            );
        }
    }

    _renderRightImg() {
        if (this.props.showRightIcon) {
            return (
                <TouchableHighlight style={styles.rightIconContainer}
                                    underlayColor='rgba(255, 255, 255, 0.2)'
                                    onPress={() => ToastAndroid.show('share', ToastAndroid.SHORT)}>
                    <Image style={styles.rightIcon} source={this.props.rightIcon}/>
                </TouchableHighlight>
            );
        }
    }
}